<template>
  <view class="order">
    <view class="order-list-item" v-for="item in orderList" :key="item.order_id">
      <goodInfo :info="item.car_info" :state="item.state"></goodInfo>
      <orderStatus @closeOrder="closeOrder" @deleteOrder="deleteOrder" @completeOrder="completeOrder" :info="item.car_info" :state="item.state" :order_id="item.order_id"></orderStatus>
    </view>
    
  </view>
</template>

<script>
  import goodInfo from './goodInfo/goodInfo.vue'
  import orderStatus from './orderStatus/orderStatus.vue'
  export default {
    components: {
      goodInfo,
      orderStatus
    },
		props:{
			orderList:{
				type:Array,
				default(){
					return []
				}
			}
		},
    data() {
      return {
      };
    },
    methods:{
      closeOrder(order_id){
				this.$emit('cancelOrder',order_id)
      },
			deleteOrder(order_id){
				this.$emit('deleteOrder',order_id)
			},
			completeOrder(order_id){
				this.$emit('completeOrder',order_id)
			},
    }
  }
</script>

<style lang="scss" scoped>
  .order {
    padding-top: 40upx;

    .order-list-item {
      background-color: #fff;
      padding: 40upx;
      border-radius: 10upx;
       box-shadow: 0 4upx 24upx 0 rgba(0, 0, 0, 0.1);
			 margin-bottom: 40upx;
			 

      
    }
  }
</style>
